<template>
  <div class="cont">
    <div class="inp">
      <div class="d-item">
        <div>列表数组：</div>
        <textarea v-model="textList" rows="20" />
      </div>
      <div class="d-item">
        <div>列数据：</div>
        <textarea v-model="textColumns" rows="20" />
      </div>
    </div>
    <VList :data="data" />
  </div>
</template>

<script>
import VList from './VList'
export default {
  components: {
    VList
  },
  data () {
    return {
      // data: {
      //   list: [
      //     {
      //       id: '1',
      //       date: '2016-05-02',
      //       name: '王小虎',
      //       province: '常德',
      //       address: '枫树黎家坡村八队'
      //     },
      //     {
      //       id: '2',
      //       date: '2016-05-03',
      //       name: '王二',
      //       province: '常德',
      //       address: '枫树中学'
      //     }
      //   ],
      //   columns: [
      //     {
      //       key: 'date',
      //       name: '日期'
      //     },
      //     {
      //       key: 'name',
      //       name: '姓名'
      //     },
      //     {
      //       key: 'province',
      //       name: '省份'
      //     },
      //     {
      //       key: 'address',
      //       name: '地址'
      //     }
      //   ]
      // },
      textList: `[
    {
        "id": "1",
        "date": "2016-05-02",
        "name": "王小虎",
        "province": "常德",
        "address": "枫树黎家坡村八队"
    },
    {
        "id": "2",
        "date": "2016-05-03",
        "name": "王二",
        "province": "常德",
        "address": "枫树中学"
    }
]
      `,
      textColumns: `[
    {
        "key": "date",
        "name": "日期"
    },
    {
        "key": "name",
        "name": "姓名"
    },
    {
        "key": "address",
        "name": "地址"
    }
]
      `
    }
  },
  computed: {
    data () {
      return {
        list: JSON.parse(this.textList),
        columns: JSON.parse(this.textColumns)
      }
    }
  }
}
</script>

<style scoped>
.cont {
  .inp {
    display: flex;
  }
  .d-item {
    flex: 1;
    padding: 10px;
    textarea {
      width: 100%;
      box-sizing: border-box;
    }
  }
}
</style>
